<template>
	<view class="box">
		<!-- 我的收藏-文章 -->
		<view class="optios">
			<view class="optios-tabs">
				<u-tabs class="custom-tabs" lineColor="#C19C55" lineHeight="6" lineWidth="44" :active="activeTab"
					:scrollable="false" :list="list1" @change="changeTab">
				</u-tabs>
			</view>
			<view class="">
				<view v-if="activeTab ==0">

				</view>
				<view v-if="activeTab ==1">
					<view class="content-health-list" v-for="(item,index) in healthData" :key="index">
						<view class="health-list-img">
							<view class="_img">
								<image :src="item.imgUrl" mode=""></image>
							</view>
						</view>
						<view class="health-list-info">
							<view class="text">
								<text class="text-jingxuan">精选</text>
								{{item.text}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>
					</view>
					<view class="line">
						<u-loadmore loadmoreText="已加载全部数据" color="#E5E6E3" fontSize="30" lineColor="#E5E6E3" :dashed="false" line />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				activeTab: 0,
				list1: [{
					name: '医师专家',
				}, {
					name: '文章',
				}],
				healthData: [{
						id: 1,
						imgUrl: '../../static/logo.png',
						text: '中医艾灸的好处有哪些？中医艾灸的好处有哪些？',
						time: '2024-05-20'
					},
					{
						id: 2,
						imgUrl: '../../static/logo.png',
						text: '中医艾灸的好处有哪些？中医艾灸的好处有哪些？',
						time: '2024-05-20'
					},
					{
						id: 3,
						imgUrl: '../../static/logo.png',
						text: '中医艾灸的好处有哪些？中医艾灸的好处有哪些？',
						time: '2024-05-20'
					},
					{
						id: 4,
						imgUrl: '../../static/logo.png',
						text: '中医艾灸的好处有哪些？中医艾灸的好处有哪些？',
						time: '2024-05-20'
					}
				]
			}
		},
		methods: {
			changeTab(index) {
				this.activeTab = index.index;
				console.log(111);
			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-tabs__wrapper__nav__line {
		width: 30px !important;
		margin-left: 13rpx !important;

	}


	.box {
		height: 100vh;
		background: #F6F6F6;

		.optios {
			width: 750rpx;

			.optios-tabs {
				margin-bottom: 20rpx;
				background: #FFFFFF;
			}
		}





		.main-content {
			flex: 1;
			/* 主内容区域占据剩余空间 */
		}

		.content-health-list {
			width: 686rpx;
			height: 222rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			margin-bottom: 18rpx;
			margin-left: 16rpx;

			.health-list-img {
				width: 180rpx;
				height: 180rpx;
				margin-left: 22rpx;
				margin-top: 18rpx;
				margin-right: 22rpx;

				._img {
					width: 180rpx;
					height: 180rpx;

					image {
						width: 180rpx;
						height: 180rpx;
					}
				}
			}

			.health-list-info {
				width: 450rpx;
				height: 92rpx;
				line-height: 60rpx;
				margin-top: 14rpx;

				.text {
					.text-jingxuan {
						display: inline-block;
						width: 70rpx;
						height: 34rpx;
						background: #CB8314;
						border-radius: 14rpx 0rpx 14rpx 0rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 18rpx;
						color: #FFFFFF;
						line-height: 34rpx;
						text-align: center;
						font-style: normal;
						margin-right: 10rpx;
					}

					.text-issue {
						margin-top: 30rpx;
						margin-left: 10rpx;
					}
				}

				.time {
					width: 450rpx;
					height: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #CCCCCC;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					margin-top: 10rpx;
				}
			}
		}
		.line{
			margin-top: 50rpx;
		}
	}
</style>